<template>
	<view class="login-container">
		<!-- 状态栏占位 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		
		<!-- 顶部蓝色区域 -->
		<view class="header-section">
			<!-- 欢迎文字 -->
			<view class="welcome-text">
				欢迎来到车联网服务平台商家端
			</view>
			
			<!-- 汽车维修插画 -->
			<view class="illustration">
				<image src="/static/组 6(1).png" mode="aspectFit" class="car-illustration"></image>
			</view>
			
			<!-- 弧形底部 -->
			<view class="curve-bottom"></view>
		</view>
		
		<!-- 白色表单区域 -->
		<view class="form-container">
			<!-- 手机号登录 -->
			<view class="form-item">
				<view class="input-label">手机号登陆</view>
				<view class="input-wrapper">
					<input 
						type="number" 
						v-model="phone" 
						placeholder="请输入手机号" 
						class="input-field"
						maxlength="11"
					/>
				</view>
			</view>
			
			<!-- 验证码 -->
			<view class="form-item">
				<view class="input-label">输入验证码</view>
				<view class="input-wrapper code-wrapper">
					<input 
						type="number" 
						v-model="code" 
						placeholder="请输入验证码" 
						class="input-field"
						maxlength="6"
					/>
					<button 
						class="code-btn" 
						:class="{ disabled: !canSendCode }"
						@click="sendCode"
						:disabled="!canSendCode"
					>
						{{ codeText }}
					</button>
				</view>
			</view>
			
			<!-- 注册链接 -->
			<view class="register-link">
				<text class="link-text" @click="goToRegister">立即注册></text>
			</view>
			
			<!-- 登录按钮 -->
			<button class="login-btn" @click="handleLogin" :disabled="!canLogin">
				登录
			</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 0,
			phone: '',
			code: '',
			countdown: 0,
			timer: null
		}
	},
	computed: {
		canSendCode() {
			return this.phone.length === 11 && this.countdown === 0
		},
		canLogin() {
			return this.phone.length === 11 && this.code.length === 6
		},
		codeText() {
			return this.countdown > 0 ? `${this.countdown}s` : '获取验证码'
		}
	},
	onLoad() {
		// 获取状态栏高度
		const systemInfo = uni.getSystemInfoSync()
		this.statusBarHeight = systemInfo.statusBarHeight || 0
	},
	onUnload() {
		if (this.timer) {
			clearInterval(this.timer)
		}
	},
	methods: {
		// 发送验证码
		sendCode() {
			if (!this.canSendCode) return
			
			// 验证手机号格式
			const phoneReg = /^1[3-9]\d{9}$/
			if (!phoneReg.test(this.phone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				return
			}
			
			// 开始倒计时
			this.countdown = 60
			this.timer = setInterval(() => {
				this.countdown--
				if (this.countdown <= 0) {
					clearInterval(this.timer)
					this.timer = null
				}
			}, 1000)
			
			// 模拟发送验证码
			uni.showToast({
				title: '验证码已发送',
				icon: 'success'
			})
		},
		
		// 登录
		handleLogin() {
			if (!this.canLogin) return
			
			// 验证手机号格式
			const phoneReg = /^1[3-9]\d{9}$/
			if (!phoneReg.test(this.phone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				return
			}
			
			// 验证验证码
			if (this.code.length !== 6) {
				uni.showToast({
					title: '请输入6位验证码',
					icon: 'none'
				})
				return
			}
			
			// 显示加载中
			uni.showLoading({
				title: '登录中...'
			})
			
			// 模拟登录请求
			setTimeout(() => {
				uni.hideLoading()
				uni.showToast({
					title: '登录成功',
					icon: 'success'
				})
				
				// 跳转到主页
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/index/index'
					})
				}, 1500)
			}, 2000)
		},
		
		// 跳转到注册页面
		goToRegister() {
			uni.navigateTo({
				url: '/pages/register/register'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.login-container {
	min-height: 100vh;
	background: #f5f5f5;
	display: flex;
	flex-direction: column;
}

.status-bar {
	background: linear-gradient(135deg, #007AFF 0%, #0056CC 100%);
}

.header-section {
	background: linear-gradient(135deg, #007AFF 0%, #0056CC 100%);
	height: 500rpx;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 40rpx;
	
	.welcome-text {
		font-size: 36rpx;
		color: #ffffff;
		font-weight: 500;
		text-align: center;
		margin-bottom: 40rpx;
		line-height: 1.4;
	}
	
	.illustration {
		width: 300rpx;
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.car-illustration {
			width: 100%;
			height: 100%;
		}
	}
	
	.curve-bottom {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 60rpx;
		background: #ffffff;
		border-radius: 50% 50% 0 0;
	}
}

.form-container {
	flex: 1;
	background: #ffffff;
	padding: 60rpx 40rpx 40rpx;
	margin-top: -30rpx;
	border-radius: 40rpx 40rpx 0 0;
	
	.form-item {
		margin-bottom: 40rpx;
		
		.input-label {
			font-size: 28rpx;
			color: #333333;
			margin-bottom: 20rpx;
			font-weight: 500;
		}
		
		.input-wrapper {
			border-bottom: 2rpx solid #e9ecef;
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			
			.input-field {
				flex: 1;
				font-size: 32rpx;
				color: #333333;
				background: transparent;
				border: none;
			}
			
			&.code-wrapper {
				.code-btn {
					background: #007AFF;
					color: #ffffff;
					border: none;
					border-radius: 8rpx;
					padding: 16rpx 24rpx;
					font-size: 24rpx;
					margin-left: 20rpx;
					
					&.disabled {
						background: #cccccc;
						color: #999999;
					}
				}
			}
		}
	}
	
	.register-link {
		margin: 40rpx 0;
		
		.link-text {
			font-size: 28rpx;
			color: #007AFF;
		}
	}
	
	.login-btn {
		width: 100%;
		height: 88rpx;
		background: #007AFF;
		color: #ffffff;
		border: none;
		border-radius: 12rpx;
		font-size: 32rpx;
		font-weight: 500;
		margin-top: 40rpx;
		
		&:disabled {
			background: #cccccc;
			color: #999999;
		}
	}
}
</style>
